<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>/home/zjh/git/Koala-UI/KoalaUI/WebContent/lib/uploader/uploader.js</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
    <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
    <script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">

<div id="doc">
    <div id="hd" class="yui3-g header">
        <div class="yui3-u-3-4">
            
                <h1><img src="../assets/css/logo.png" title=""></h1>
            
        </div>
        <div class="yui3-u-1-4 version">
            <em>API Docs for: </em>
        </div>
    </div>
    <div id="bd" class="yui3-g">

        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
    <h2 class="off-left">APIs</h2>
    <div id="api-tabview" class="tabview">
        <ul class="tabs">
            <li><a href="#api-classes">Classes</a></li>
            <li><a href="#api-modules">Modules</a></li>
        </ul>

        <div id="api-tabview-filter">
            <input type="search" id="api-filter" placeholder="Type to filter APIs">
        </div>

        <div id="api-tabview-panel">
            <ul id="api-classes" class="apis classes">
            
                <li><a href="../classes/Accordion.html">Accordion</a></li>
            
                <li><a href="../classes/AutoComplete.html">AutoComplete</a></li>
            
                <li><a href="../classes/Button.html">Button</a></li>
            
                <li><a href="../classes/Carousel.html">Carousel</a></li>
            
                <li><a href="../classes/ColorPicker.html">ColorPicker</a></li>
            
                <li><a href="../classes/Combobox.html">Combobox</a></li>
            
                <li><a href="../classes/DateTimePicker.html">DateTimePicker</a></li>
            
                <li><a href="../classes/Grid.html">Grid</a></li>
            
                <li><a href="../classes/ListView.html">ListView</a></li>
            
                <li><a href="../classes/Popover.html">Popover</a></li>
            
                <li><a href="../classes/ProgressBar.html">ProgressBar</a></li>
            
                <li><a href="../classes/RichTextEditor.html">RichTextEditor</a></li>
            
                <li><a href="../classes/ScrollSpy.html">ScrollSpy</a></li>
            
                <li><a href="../classes/Select.html">Select</a></li>
            
                <li><a href="../classes/SideBar.html">SideBar</a></li>
            
                <li><a href="../classes/Slider.html">Slider</a></li>
            
                <li><a href="../classes/Spinner.html">Spinner</a></li>
            
                <li><a href="../classes/Tab.html">Tab</a></li>
            
                <li><a href="../classes/ToolBar.html">ToolBar</a></li>
            
                <li><a href="../classes/Tooltip.html">Tooltip</a></li>
            
                <li><a href="../classes/Tree.html">Tree</a></li>
            
                <li><a href="../classes/Wizard.html">Wizard</a></li>
            
            </ul>

            <ul id="api-modules" class="apis modules">
            
            </ul>
        </div>
    </div>
</div>

            </div>
        </div>
        <div class="yui3-u-3-4">
                <div id="api-options">
        Show:
        <label for="api-show-inherited">
            <input type="checkbox" id="api-show-inherited" checked>
            Inherited
        </label>

        <label for="api-show-protected">
            <input type="checkbox" id="api-show-protected">
            Protected
        </label>

        <label for="api-show-private">
            <input type="checkbox" id="api-show-private">
            Private
        </label>
        <label for="api-show-deprecated">
            <input type="checkbox" id="api-show-deprecated">
            Deprecated
        </label>

    </div>


            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
                        <h1 class="file-heading">File: /home/zjh/git/Koala-UI/KoalaUI/WebContent/lib/uploader/uploader.js</h1>

<div class="file">
    <pre class="code prettyprint linenums">
+(function($) {
    var pluginName = &#x27;uploader&#x27;;

    // These are the plugin defaults values
    var defaults = {
        url : document.URL,
        method : &#x27;POST&#x27;,
        extraData : {},
        /**
		 * 文件大小验证
		 * @property allowedTypes
		 */
        maxFileSize : 0,
        /**
		 * 文件类型验证
		 * @property allowedTypes
		 */
        allowedTypes : &#x27;*&#x27;,
        /**
		 * 文件名称验证
		 * @property extFilter
		 */
        extFilter : null,
        dataType : null,
        fileName : &#x27;file&#x27;,
        /**
		 * 组件初始化触发
		 */
        onInit : function() {
        },
        onFallbackMode : function() {

        },
        /**
		 * 文件开始上传事件
		 * @property id
		 * @property file
		 */
        onNewFile : function(id, file) {

        },
        /**
		 * 文件上传之前
		 * @property id
		 */
        onBeforeUpload : function(id) {

        },
        /**
		 * 完成事件
		 */
        onComplete : function() {

        },
        /**
		 * 文件开始上传事件
		 * @property id
		 * @property percent  百分比数值
		 */
        onUploadProgress : function(id, percent) {

        },
        /**
		 * 文件上传完成
		 */
        onUploadSuccess : function(id, data) {

        },
        /**
		 * 文件上传出错
		 * @property id
		 * @property message
		 */
        onUploadError : function(id, message) {

        },
        /**
		 * 文件类型不匹配
		 * @property file
		 */
        onFileTypeError : function(file) {

        },
        /**
		 * 文件大小不匹配
		 * @property file
		 */
        onFileSizeError : function(file) {

        },
        /**
		 * 文件名称不匹配
		 * @property file
		 */
        onFileExtError : function(file) {

        }
    };

    var Uploader = function(element, options) {
        this.element = $(element);

        this.settings = $.extend({}, defaults, options);
        if (!this.checkBrowser()) {
            this.swfUploader();
            return false;
        }

        this.init();

        return true;
    };

    Uploader.prototype.checkBrowser = function() {
        if (window.FormData === undefined) {
            this.settings.onFallbackMode.call(this.element, &#x27;Browser doesn\&#x27;t support From API&#x27;);
            this.element.find(&#x27;.error-msg&#x27;).text(&#x27;Browser doesn\&#x27;t support From API&#x27;);
            return false;
        }

        if (this.element.find(&#x27;input[type=file]&#x27;).length &gt; 0) {
            return true;
        }

        if (!this.checkEvent(&#x27;drop&#x27;, this.element) || !this.checkEvent(&#x27;dragstart&#x27;, this.element)) {
            this.settings.onFallbackMode.call(this.element, &#x27;Browser doesn\&#x27;t support Ajax Drag and Drop&#x27;);
            this.element.find(&#x27;.error-msg&#x27;).text(&#x27;Browser doesn\&#x27;t support Ajax Drag and Drop&#x27;);
            return false;
        }

        return true;
    };

    Uploader.prototype.checkEvent = function(eventName, element) {
        var element = element || document.createElement(&#x27;div&#x27;);
        var eventName = &#x27;on&#x27; + eventName;

        var isSupported = eventName in element;

        if (!isSupported) {
            if (!element.setAttribute) {
                element = document.createElement(&#x27;div&#x27;);
            }
            if (element.setAttribute &amp;&amp; element.removeAttribute) {
                element.setAttribute(eventName, &#x27;&#x27;);
                isSupported = typeof element[eventName] == &#x27;function&#x27;;

                if ( typeof element[eventName] != &#x27;undefined&#x27;) {
                    element[eventName] = undefined;
                }
                element.removeAttribute(eventName);
            }
        }

        element = null;
        return isSupported;
    };

    Uploader.prototype.init = function() {
        var widget = this;
        widget.element.html(Uploader.TEMPLATE1.join(&#x27;&#x27;));
        widget.queue = new Array();
        widget.queuePos = -1;
        widget.queueRunning = false;

        // -- Drag and drop event
        widget.element.on(&#x27;drop&#x27;, function(evt) {
            evt.preventDefault();
            var files = evt.originalEvent.dataTransfer.files;

            widget.queueFiles(files);
        });

        var inputFile = widget.element.find(&#x27;input[type=file]&#x27;);
        //-- Optional File input to make a clickable area
        inputFile.on(&#x27;change&#x27;, function(evt) {
            var files = evt.target.files;

            widget.queueFiles(files);

            $(this).val(&#x27;&#x27;);
        });
        widget.element.find(&#x27;.dropfile&#x27;).on(&#x27;click&#x27;, function(e){
            e.stopPropagation();
            e.preventDefault();
            inputFile.click();
        });
        widget.element.find(&#x27;#uploadBtn&#x27;).on(&#x27;click&#x27;, function(e){
            e.stopPropagation();
            e.preventDefault();
            inputFile.click();
        });
        this.settings.onInit.call(this.element);
    };

    Uploader.prototype.queueFiles = function(files) {
        var j = this.queue.length;

        for (var i = 0; i &lt; files.length; i++) {
            var file = files[i];

            // Check file size
            if ((this.settings.maxFileSize &gt; 0) &amp;&amp; (file.size &gt; this.settings.maxFileSize)) {
                this.element.find(&#x27;.error-msg&#x27;).css(&#x27;color&#x27;, &#x27;#d2322d&#x27;).text(&#x27;File Size Error!&#x27;);
                this.settings.onFileSizeError.call(this.element, file);

                continue;
            }
            // Check file type
            if ((this.settings.allowedTypes != &#x27;*&#x27;) &amp;&amp; !file.type.match(this.settings.allowedTypes)) {
                this.element.find(&#x27;.error-msg&#x27;).css(&#x27;color&#x27;, &#x27;#d2322d&#x27;).text(&#x27;File Type Error!&#x27;);
                this.settings.onFileTypeError.call(this.element, file);

                continue;
            }

            // Check file extension
            if (this.settings.extFilter != null) {
                var extList = this.settings.extFilter.toLowerCase().split(&#x27;;&#x27;);

                var ext = file.name.toLowerCase().split(&#x27;.&#x27;).pop();

                if ($.inArray(ext, extList) &lt; 0) {
                    this.element.find(&#x27;.error-msg&#x27;).css(&#x27;color&#x27;, &#x27;#d2322d&#x27;).text(&#x27;File Ext Error!&#x27;);
                    this.settings.onFileExtError.call(this.element, file);
                    continue;
                }
            }

            this.queue.push(file);

            var index = this.queue.length - 1;
            this.element.find(&#x27;.file-name&#x27;).text(file.name);
            this.element.find(&#x27;.file-name&#x27;).removeAttr(&#x27;data-title&#x27;)
            this.settings.onNewFile.call(this.element, index, file);
        }

        // Only start Queue if we haven&#x27;t!
        if (this.queueRunning) {
            return false;
        }

        // and only if new Failes were succefully added
        if (this.queue.length == j) {
            return false;
        }

        this.processQueue();

        return true;
    };

    Uploader.prototype.processQueue = function() {
        var widget = this;

        widget.queuePos++;

        if (widget.queuePos &gt;= widget.queue.length) {
            // Cleanup

            widget.settings.onComplete.call(widget.element);

            // Wait until new files are droped
            widget.queuePos = (widget.queue.length - 1);

            widget.queueRunning = false;

            return;
        }

        var file = widget.queue[widget.queuePos];

        // Form Data
        var fd = new FormData();
        fd.append(widget.settings.fileName, file);

        // Append extra Form Data
        $.each(widget.settings.extraData, function(exKey, exVal) {
            fd.append(exKey, exVal);
        });
        widget.element.find(&#x27;.file-info&#x27;).show();
        widget.settings.onBeforeUpload.call(widget.element, widget.queuePos);

        widget.queueRunning = true;

        // Ajax Submit
        $.ajax({
            url : widget.settings.url,
            type : widget.settings.method,
            dataType : widget.settings.dataType,
            data : fd,
            cache : false,
            contentType : false,
            processData : false,
            forceSync : false,
            xhr : function() {
                var xhrobj = $.ajaxSettings.xhr();
                if (xhrobj.upload) {
                    xhrobj.upload.addEventListener(&#x27;progress&#x27;, function(event) {
                        var percent = 0;
                        var position = event.loaded || event.position;
                        var total = event.total || e.totalSize;
                        if (event.lengthComputable) {
                            percent = Math.ceil(position / total * 100);
                        }
                        widget.element.find(&#x27;.progress-bar&#x27;).css(&#x27;width&#x27;, percent + &#x27;%&#x27;);
                        widget.settings.onUploadProgress.call(widget.element, widget.queuePos, percent);
                    }, false);
                }

                return xhrobj;
            },
            success : function(data, message, xhr) {
                widget.element.find(&#x27;.progress-bar&#x27;).css(&#x27;width&#x27;, &#x27;100%&#x27;);
                widget.settings.onUploadSuccess.call(widget.element, widget.queuePos, data);
            },
            error : function(xhr, status, errMsg) {
                widget.element.find(&#x27;.error-msg&#x27;).css(&#x27;color&#x27;, &#x27;#d2322d&#x27;).text(errMsg);
                widget.settings.onUploadError.call(widget.element, widget.queuePos, errMsg);
            },
            complete : function(xhr, textStatus) {
                widget.processQueue();
            }
        });
    }
    Uploader.prototype.swfUploader = function(){
        var widget = this;
        widget.element.html(Uploader.TEMPLATE2.join(&#x27;&#x27;));
        var swfu = new SWFUpload({
            flash_url : widget.settings.flash_url,
            upload_url: widget.settings.url,
            file_size_limit : widget.settings.fileSizeLimit || &#x27;50 MB&#x27;,
            file_types : &quot;*.*&quot;,
            file_post_name : &#x27;file&#x27;,
            // Button settings
            button_width: &#x27;125&#x27;,
            button_height: &#x27;34&#x27;,
            button_placeholder_id: &#x27;swfUpload&#x27;,
            button_image_url: widget.settings.button_image_url,
            button_text: &#x27;&lt;span class=&quot;sud_btn&quot;&gt;选择文件 &lt;/span&gt;&#x27;,
            button_text_style: &#x27;.sud_btn {width: 125px; background-color:#f00; font-size: 18px; }&#x27;,
            button_text_top_padding: 10,
            button_text_left_padding: 35,
            button_window_mode: SWFUpload.WINDOW_MODE.WINDOW,
            button_cursor: SWFUpload.CURSOR.HAND,
            upload_progress_handler : function(file, complate, total){
                var percentage = complate/total*100 + &#x27;%&#x27;;
                widget.element.find(&#x27;.progress-bar&#x27;).css(&#x27;width&#x27;, percentage);
            },
            upload_start_handler: function(file){
                widget.element.find(&#x27;.file-name&#x27;).text(file.name);
            },
            upload_error_handler : function(file, errorCode, message){
                widget.element.find(&#x27;.point-title&#x27;).css(&#x27;color&#x27;, &#x27;#d2322d&#x27;).text(&#x27;errorCode:&#x27;+errorCode+&#x27;,message:&#x27;+message);
            },
            upload_success_handler  : function(file, data, response){
                widget.element.find(&#x27;.point-title&#x27;).css(&#x27;color&#x27;, &#x27;#47a447&#x27;).text(&#x27;文件上传成功&#x27;);
                widget.settings.onUploadSuccess.call(widget.element, file.name, data);
            }
        });
        widget.element.find(&#x27;#startBtn&#x27;).on(&#x27;click&#x27;, function(){
            swfu.startUpload();
            widget.element.find(&#x27;.progress&#x27;).show();
            widget.element.find(&#x27;.point-title&#x27;).text(&#x27;文件开始上传&#x27;);
        });
        widget.element.find(&#x27;#cancleBtn&#x27;).on(&#x27;click&#x27;, function(){
            swfu.cancelUpload();
            widget.element.find(&#x27;.point-title&#x27;).text(&#x27;文件取消上传&#x27;);
        });
    }
    Uploader.TEMPLATE1 = [
        &#x27;&lt;div class=&quot;uploader&quot;&gt;&#x27;,
        &#x27;&lt;input type=&quot;file&quot; name=&quot;files[]&quot; style=&quot;display:none;&quot;&gt;&#x27;,
        &#x27;&lt;div class=&quot;file-input&quot; id=&quot;uploadBtn&quot;&gt;&#x27;,
        &#x27;&lt;label class=&quot;file-label&quot; data-title=&quot;Choose&quot;&gt;&#x27;,
        &#x27;&lt;span class=&quot;file-name&quot; data-title=&quot;No File ...&quot;&gt;&#x27;,
        &#x27;&lt;i class=&quot;fa fa-upload&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;/label&gt;&#x27;,
        &#x27;&lt;a class=&quot;remove&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;icon-remove&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;&#x27;,
        &#x27;&lt;div class=&quot;dropfile&quot;&gt;&lt;div&gt;Drag &amp;amp; Drop File Here&lt;/div&gt;&#x27;,
        &#x27;&lt;div class=&quot;file-info&quot;&gt;&lt;div class=&quot;progress progress-striped active&quot;&gt;&#x27;,
        &#x27;&lt;div class=&quot;progress-bar progress-bar-success&quot; role=&quot;progressbar&quot;&gt;&lt;/div&gt;&#x27;,
        &#x27;&lt;/div&gt;&lt;div class=&quot;point-title&quot;&gt;&lt;/div&gt;&#x27;,
        &#x27;&lt;div class=&quot;file-name&quot;&gt;&lt;/div&gt;&lt;div class=&quot;error-msg&quot;&gt;&lt;/div&gt;&lt;/div&gt;&#x27;,
        &#x27;&lt;div class=&quot;browser&quot;&gt;&#x27;,
        &#x27;&lt;span class=&quot;fa fa-cloud-upload&quot;&gt;&lt;/span&gt;&#x27;,
        &#x27;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&#x27;
    ];
    Uploader.TEMPLATE2 = [
        &#x27;&lt;div id=&quot;swfUploadContainer&quot; class=&quot;swfUpload-Container&quot;&gt;&#x27;,
        &#x27;&lt;div style=&quot;width:210px;&quot;&gt;&lt;div id=&quot;swfUpload&quot;&gt;&lt;/div&gt;&#x27;,
        &#x27;&lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; id=&quot;cancleBtn&quot; style=&quot;margin-left:5px;&quot;&gt;&lt;i class=&quot;fa fa-stop&quot; &gt;&lt;/i&gt;&lt;/button&gt;&#x27;,
        &#x27;&lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; id=&quot;startBtn&quot; &gt;&lt;i class=&quot;fa fa-play&quot; &gt;&lt;/i&gt;&lt;/button&gt;&#x27;,
        &#x27;&lt;/div&gt;&lt;div class=&quot;progress progress-striped active&quot; style=&quot;display:none&quot;&gt;&#x27;,
        &#x27;&lt;div class=&quot;progress-bar progress-bar-success&quot; role=&quot;progressbar&quot;aria-valuemax=&quot;100&quot;&gt;&lt;/div&gt;&#x27;,
        &#x27;&lt;/div&gt;&#x27;,
        &#x27;&lt;div class=&quot;point-title&quot;&gt;&lt;/div&gt;&#x27;,
        &#x27;&lt;div class=&quot;file-name&quot;&gt;&lt;/div&gt;&#x27;,
        &#x27;&lt;div class=&quot;error-msg&quot;&gt;&lt;/div&gt;&#x27;,
        &#x27;&lt;/div&gt;&#x27;
    ]
    $.fn.uploader = function(options) {
        return this.each(function() {
            if (!$.data(this, pluginName)) {
                $.data(this, pluginName, new Uploader(this, options));
            }
        });
    };

    // -- Disable Document D&amp;D events to prevent opening the file on browser when we drop them
    $(document).on(&#x27;dragenter&#x27;, function(e) {
        e.stopPropagation();
        e.preventDefault();
    });
    $(document).on(&#x27;dragover&#x27;, function(e) {
        e.stopPropagation();
        e.preventDefault();
    });
    $(document).on(&#x27;drop&#x27;, function(e) {
        e.stopPropagation();
        e.preventDefault();
    });
})(jQuery);

    </pre>
</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../assets/../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>
